<template>
	<view id="tmpl">
		<sl-filter :ref="'slFilter'" :topFixed="topFixed" :menuList="menuList" @result="result" />
		<view class="filter-class">
			<view class="current-class">
				<input type="text" class="uni-input filter-search " placeholder="姓名查询" @input="filter_search" v-model="filter_nickname" />
				<view class="search_bottn" style=" font-size: 30rpx;" @click="BackSearch">返回</view>
			</view>
		</view>
		<view class="search-list" v-if="is_filter_nickname">
			<view v-for="(item, index) in list_member" class="search-item">
				<text @click="Search(item)">{{ item.nick_name }}</text>
			</view>
			<view class="none_user" v-show="none_user"><text>没有用户</text></view>
		</view>
		<!-- a按钮提报 -->
		<view class="buttons">
			<button @click="GoToPage1()" type="primary" style="font-size: 30rpx;">提报</button>
			<button type="warn" style="font-size: 30rpx;" @click="GoToPage2()">未遂</button>
			<button type="primary" style="background-color: #A5673F;font-size: 30rpx" @click="Proc()">已处</button>
			<button type="warn" style="background-color: #ff5500;font-size: 30rpx" @click="As()">未处</button>
			<button type="warn" style="background-color: #ff007f;font-size: 30rpx" @click="ass()">验证</button>
		</view>
		<view class="cu-card article" :class="'no-card'" v-for="(item, index) in hidden">
			<view class="cu-item shadow">
				<view class="title">
					<view class="text-cut text-black" @click="asda(item.id)">
						<view class="status" style="float: right;color: #e54d42; font-size:14px;font-weight:normal" v-show="item.bzyz == 1">已验证</view>
						<view class="status" style="float: right;color: #e54d42; font-size:14px;font-weight:normal" v-show="item.bzyz == 0">未验证</view>
						<view class="status" style="float: right;color: #e54d42; font-size:14px;font-weight:normal" v-show="item.bzyz == 2">验证不合格</view>
						<view class="status" style="float: right;color: #e54d42; font-size:14px;font-weight:normal" v-show="item.clzt == 1">已整改,</view>
						<view class="status" style="float: right;color: #e54d42; font-size:14px;font-weight:normal" v-show="item.clzt == 0">未整改,</view>
						<view class="status" style="float: right;color: #e54d42; font-size:14px;font-weight:normal" v-show="item.shzt == '1'">已审核,</view>
						<view class="status" style="float: right; color: #fbbd08; font-size:14px;font-weight:normal" v-show="item.shzt == '0'">未审核,</view>
						<view class="status" style="float: right;color: #333; font-size:14px;font-weight:normal" v-show="item.shzt == '2'">已退回,</view>
						{{ item.sbrxm }}
						<text style="margin-left: 30rpx;">{{ item.deptName }}</text>
						<text class="date">{{ item.clsj != null ? item.clsj : '' }}</text>
					</view>
				</view>
				<view class="content">
					<image class="text-description" :src="item.yhfj" mode="aspectFill" @click="showImage(item.yhfj)"></image>
					<view class="desc">
						<view class="text-content">{{ item.yhms }}</view>
						<view class="tool">
							<view class="cu-tag bg-red light sm round" v-if="item.clrxm">
								处理人:
								<text>{{ item.clrxm }}</text>
							</view>
							<view class="cu-tag bg-green light sm round">
								分数:
								<text>{{ item.fz ? item.fz : 0 }}</text>
							</view>
							<view class="cu-tag bg-green light sm round">
								整改期限:
								<text v-if="item.qt <= 0">0</text>
								<text v-else>{{ item.qt }}</text>
							</view>
							<view v-if="item.clzt == 1 && item.shzt == 0">
								<button v-if="item.show_apply_button" class="apply_button cu-btn bg-red shadow" @click="applys(item.id)">不通过</button>
								<button v-if="item.show_apply_button" style="margin-right: 150rpx;" class="apply_button cu-btn bg-red shadow" @click="showss(item.id)">通过</button>
							</view>
							<view v-else>
								<button
									v-if="item.show_apply_button"
									class="apply_button cu-btn bg-red shadow"
									:data-id="item.id"
									@tap="showModal"
									data-target="ConfirmDialogModal"
								>
									不通过
								</button>
								<button
									v-if="item.show_apply_button"
									style="margin-right: 150rpx;"
									class="apply_button cu-btn bg-red shadow"
									:data-id="item.id"
									:data-data="item"
									@tap="showModal1"
									data-target="ConfirmDialogModal1"
								>
									通过
								</button>
							</view>
						</view>
					</view>
					<view class="cu-modal" :class="modalName == 'ConfirmDialogModal1' ? 'show' : ''">
						<view class="cu-dialog" v-if="aa.clzt == 1 && aa.shzt == 0">
							<view class="cu-bar bg-white justify-end">
								<view class="content">审核</view>
								<view class="action" @tap="hideModal"><text class="cuIcon-close text-red"></text></view>
							</view>
							<view class="cu-bar bg-white justify-end">
								<view class="action" style="width: 100%;display: flex;justify-content: space-between">
									<button class="cu-btn bg-red" @tap="shows">通过</button>
									<button class="cu-btn bg-green margin-left" @tap="apply">不通过</button>
								</view>
							</view>
						</view>
						<view class="cu-dialog" v-else>
							<view class="cu-bar bg-white justify-end">
								<view class="content">原因</view>
								<view class="action" @tap="hideModal"><text class="cuIcon-close text-red"></text></view>
							</view>
							<view class="padding-xl">
								<input type="text" placeholder="姓名查询" @input="filter_searcha" v-model="clrname" />
								<view class="search-list" v-if="is_clrname">
									<view v-for="(item, index) in list_clr" class="search-item">
										<text @click="Serarcha(item)">{{ item.nick_name }}</text>
									</view>
								</view>
								<!-- <input type="text" placeholder="处理人" v-model="nick_name" @input="userlist()"  /> -->
								<input type="text" placeholder="处理人电话" v-model="user_xex" />
								<xp-picker @confirm="confirm">{{ tm }}</xp-picker>
							</view>
							<view class="cu-bar bg-white justify-end">
								<view class="action" style="width: 100%;display: flex;justify-content: space-between">
									<button class="cu-btn bg-red" @tap="showShcg">提交</button>
									<button class="cu-btn bg-green margin-left" @tap="hideModal">关闭</button>
								</view>
							</view>
						</view>
					</view>
					<view class="cu-modal" :class="modalName == 'ConfirmDialogModal' ? 'show' : ''">
						<view class="cu-dialog">
							<view class="cu-bar bg-white justify-end">
								<view class="content">原因</view>
								<view class="action" @tap="hideModal"><text class="cuIcon-close text-red"></text></view>
							</view>
							<view class="padding-xl"><input type="text" placeholder="未通过理由" v-model="reason" /></view>
							<view class="cu-bar bg-white justify-end">
								<view class="action" style="width: 100%;display: flex;justify-content: space-between;">
									<button class="cu-btn bg-red" @tap="apply">不通过</button>
									<button class="cu-btn bg-green margin-left" @tap="hideModal">关闭</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="text-gray text-center text-sm margin-tb-sm" v-if="totals >= max_totals">没有更多</view>
	</view>
</template>
<script>
import slFilter from '@/components/songlazy-sl-filter/sl-filter/sl-filter.vue';
import config from '../../static/common/config.js';
import picker from '@/components/uni-datetime-picker/uni-datetime-picker.vue';

export default {
	components: {
		slFilter,
		picker
	},
	data() {
		return {
			user_xex: '',
			aa: {},
			tm: '请选择日期',
			show_apply_button: false,
			user_name: '',
			nick_name: '',
			apply_id: null,
			reason: '',
			modalName: null,
			list_clr: [],
			is_filter_nickname: false,
			clrname: '',
			is_clrname: false,
			hidden: [],
			dept: [],
			pageNum: 1,
			filter_nickname: '',
			topFixed: true,
			none_user: false,
			list_member: [],
			user_name: '', // 筛选用 姓名
			date: '', // 筛选用 时间
			deptId: '', // 筛选用 班组ID
			totals: 0,
			max_totals: 999 ,
			menuList: [
				{
					title: '班组',
					key: 'key_1',
					detailList: [
						{
							title: '全部',
							value: ''
						}
					]
				},
				{
					title: '时间',
					key: 'key_2',
					isMutiple: false,
					detailList: [
						{
							title: '全部',
							value: ''
						}
					]
				}
			]
		};
	},
	onReachBottom() {
		uni.showLoading({
			title: '加载中'
		});
		let _this = this;
		this.pageNum += 1;
		let user_info = uni.getStorageSync('user');
		this.$api
			.yh({
				pageNum: this.pageNum,
				pageSize: 10,
				sbrxm: _this.user_name, // 姓名
				sbsj: _this.date, //时间：
				deptId: _this.deptId // 班组ID
			})
			.then(res => {
				console.log(res);
				_this.max_totals = res.data.total
				_this.$_if.FormatThumb(res.data.rows, config, 'yhfj');
				_this.totals += res.data.rows.length;
				if (_this.totals < res.data.total) {
					for (let i = 0; i < res.data.rows.length; i++) {
						let item = res.data.rows[i];
						item['thumb'] = '../../static/image/icon/book.png';
						item['name'] = item.title;
						item['yhfj'] = item.yhfj.split(',')[0];
						console.log(item['yhfj']);
						if (user_info.deptId == item.deptId && user_info.user.postIds != null && item.shzt == 0 && user_info.user.postIds.indexOf(5) != -1) {
							item.show_apply_button = true;
						} else if (!user_info.user.postIds && user_info.user.deptId != item.deptId && item.shzt == 1) {
							item.show_apply_button = false;
						}
						_this.hidden.push(item);
					}
				}
				uni.hideLoading();
			});
	},
	onShow() {
		let _this = this;
		this.$_if.Initialize(this);
		let user_info = uni.getStorageSync('user');
		console.log('user_info', user_info);
		_this.hidden = [];

		let is_login = uni.getStorageSync('user_token') ? true : false;
		if (!is_login) {
			uni.navigateTo({
				url: '../profile/user_login'
			});
		}
		console.log(user_info);
		_this.banzhu();
		_this.today();
		_this.yinhuan();
	},
	methods: {
		//班组列表
		banzhu() {
			this.$api.team({}).then(res => {
				this.menuList[0].detailList = [];
				this.menuList[0].detailList.push({
					title: '全部',
					value: ''
				});
				for (let i = 0; i < res.data.data.length; i++) {
					let obj = res.data.data[i];
					let dept_name = obj['dept_name']; // 名称
					let dept_id = obj['dept_id']; //  ID
					let data = {
						title: dept_name,
						value: dept_id
					};
					this.menuList[0].detailList.push(data);
				}
			});
		},
		//日期管理
		today() {
			let _this = this;
			_this.menuList[1].detailList = [];
			_this.menuList[1].detailList.push({
				title: '全部',
				value: ''
			});
			for (let i = 0; i <= 7; i++) {
				let date = _this.$_if.GetOfferDate(-i);
				let dept_name = date; // 名称
				let dept_id = date; //  ID
				let data = {
					title: dept_name,
					value: dept_id
				};
				_this.menuList[1].detailList.push(data);
			}
		},
		asda(id) {
			console.log(id);
			uni.navigateTo({
				url: 'files?id=' + id
			});
		},

		showImage(src) {
			uni.previewImage({
				urls: [src],
				current: src
			});
		},
		yinhuan() {
			let _this = this;
			this.$_if.Initialize(this);
			let user_info = uni.getStorageSync('user');
			this.$api
				.yh({
					pageNum: this.pageNum,
					pageSize: 10,
					sbrxm: _this.user_name, // 姓名
					sbsj: _this.date, //时间：
					deptId: _this.deptId // 班组ID
				})
				.then(res => {
					console.log(res);
					_this.$_if.FormatThumb(res.data.rows, config, 'yhfj');
					for (let i = 0; i < res.data.rows.length; i++) {
						let item = res.data.rows[i];
						item['thumb'] = '../../static/image/icon/book.png';
						item['name'] = item.title;
						item['yhfj'] = item.yhfj.split(',')[0];
						console.log(item['yhfj']);
						if (user_info.deptId == item.deptId && user_info.user.postIds != null && item.shzt == 0 && user_info.user.postIds.indexOf(5) != -1) {
							item.show_apply_button = true;
						} else if (!user_info.user.postIds && user_info.user.deptId != item.deptId && item.shzt == 1) {
							item.show_apply_button = false;
						}
						_this.hidden.push(item);
					}
				});
		},
		//验证
		ass() {
			uni.navigateTo({
				url: 'review'
			});
		},
		//已处理
		Proc() {
			uni.navigateTo({
				url: 'Processed'
			});
		},
		//模糊查询
		confirm(e) {
			this.tm = e.value;
			console.log(e);
		},
		//未遂
		As() {
			uni.navigateTo({
				url: 'Unprocessed'
			});
		},
		//模糊查询
		filter_search(data) {
			let val = data.detail.value;
			if (val.length > 0) {
				this.is_filter_nickname = true;
				let _this = this;
				this.$api
					.getUserList({
						nickName: val
					})
					.then(res => {
						_this.none_user = res.data.data.length == 0;
						_this.list_member = res.data.data;
					});
				console.log(_this.list_member);
			} else {
				this.is_filter_nickname = false;
			}
		},
		filter_searcha(data) {
			let val = data.detail.value;
			if (val.length > 0) {
				this.is_clrname = true;
				let _this = this;
				this.$api
					.getUserList({
						nickName: val
					})
					.then(res => {
						_this.list_clr = res.data.data;
					});
			} else {
				this.is_clrname = false;
			}
		},
		showShcg() {
			let _this = this;
			if (_this.user_xex == 0 || (_this.user_xex == '' && _this.clrname == 0) || (_this.clrname && _this.tm == 0) || _this.tm == '') {
				alert('请完善信息');
				return false;
			}

			_this.$api
				.shtg({
					id: _this.apply_id,
					clr: _this.user_xex,
					clrxm: _this.clrname,
					tm: _this.tm
					// "shbz": _this.reason
				})
				.then(res => {
					let code = res.data.code;
					if (code === 200) {
						uni.showToast({
							title: '提交成功',
							duration: 2000,
							complete() {
								_this.modalName = null;
								for (let i = 0; i < _this.hidden.length; i++) {
									let item = _this.hidden[i];
									if (item.id == _this.apply_id) {
										item.show_apply_button = false;
									}
								}
								_this.hidden = [];
								_this.yinhuan();
							}
						});
					}
				});
		},
		userlist() {
			let _this = this;
			_this.$api
				.getUserList({
					nickName: _this.nick_name
				})
				.then(res => {
					_this.user_xex = res.data.data[0].user_name;
				});
		},
		shows() {
			let _this = this;
			_this.$api
				.shtg({
					id: _this.apply_id,
					clr: _this.user_xex,
					clrxm: _this.nick_name,
					tm: _this.tm
					// "shbz": _this.reason
				})
				.then(res => {
					let code = res.data.code;
					if (code === 200) {
						uni.showToast({
							title: '提交成功',
							duration: 2000,
							complete() {
								_this.modalName = null;
								for (let i = 0; i < _this.hidden.length; i++) {
									let item = _this.hidden[i];
									if (item.id == _this.apply_id) {
										item.show_apply_button = false;
									}
								}
								_this.hidden = [];
								_this.yinhuan();
							}
						});
					}
				});
		},
		showss(id) {
			let _this = this;
			console.log(_this.$api.shtgsa);
			_this.$api
				.shtgsa({
					id: id
				})
				.then(res => {
					let code = res.data.code;
					if (code === 200) {
						uni.showToast({
							title: '提交成功',
							duration: 2000,
							complete() {
								_this.hidden = [];
								_this.yinhuan();
							}
						});
					}
				});
		},
		Serarcha(person) {
			let _this = this;
			_this.clrname = person.nick_name;
			_this.is_clrname = false;
			_this.$api
				.getUserList({
					nickName: _this.clrname
				})
				.then(res => {
					_this.user_xex = res.data.data[0].user_name;
				});
		},
		Search(person) {
			let _this = this;
			this.user_name = person.nick_name;
			this.filter_nickname = person.nick_name;
			this.is_filter_nickname = false;
			_this.hidden = [];
			_this.yinhuan();
		},
		BackSearch() {
			let _this = this;
			_this.filter_nickname = '';
			this.is_filter_nickname = false;
			_this.hidden = [];
			this.yinhuan();
		},
		result: function(value) {
			let _this = this;
			let deptId = value.key_1;
			let date = value.key_2;
			_this.date = date;
			_this.deptId = deptId;
			console.log('date', date);
			console.log('deptId', deptId);
			_this.hidden = [];
			this.pageNum = 1;
			this.yinhuan();
		},
		GoToPage1() {
			uni.navigateTo({
				url: 'post-form'
			});
		},
		GoToPage2() {
			uni.navigateTo({
				url: 'wssj'
			});
		},
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target;
			this.apply_id = e.currentTarget.dataset.id;
		},
		showModal1(e) {
			console.log('e', e);
			this.modalName = e.currentTarget.dataset.target;
			this.apply_id = e.currentTarget.dataset.id;
			this.aa = e.currentTarget.dataset.data;
			this.clrname = this.aa.sbrxm;
			this.user_xex = this.aa.sbr;
		},
		hideModal(e) {
			this.modalName = null;
		},
		apply() {
			let _this = this;
			this.$api
				.yhxxUpdate_shth({
					id: _this.apply_id,
					shbz: _this.reason
				})
				.then(res => {
					let code = res.data.code;
					if (code === 200) {
						uni.showToast({
							title: '提交成功',
							duration: 2000,
							complete() {
								_this.modalName = null;
								for (let i = 0; i < _this.hidden.length; i++) {
									let item = _this.hidden[i];
									if (item.id == _this.apply_id) {
										item.show_apply_button = false;
									}
								}
								_this.hidden = [];
								_this.yinhuan();
							}
						});
					}
					console.log('yhxxUpdate_shth', res);
				});
		},
		applys(id) {
			let _this = this;
			this.$api
				.yhxxUpdate_shth({
					id: id
				})
				.then(res => {
					let code = res.data.code;
					if (code === 200) {
						uni.showToast({
							title: '提交成功',
							duration: 2000,
							complete() {
								_this.hidden = [];
								_this.yinhuan();
							}
						});
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: $background-color-2;
}

.cu-card {
	border-bottom: solid 2px #e5e5e5;
}

.article .date {
	font-size: $uni-font-size-sm;
	color: $uni-text-color;
	font-weight: normal;
	margin-left: 10upx;
}

.filter-class {
	background-color: #fff;
	padding: 15rpx 20rpx;

	.search-list {
		width: 100%;
		position: absolute;
		z-index: 99;
		background-color: #fff;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 20rpx 10rpx;
		margin-left: -20rpx;
		border-top: solid 1px rgba(0, 0, 0, 0.1);
		margin-top: 15rpx;

		.search-item {
			display: block;
			padding: 10rpx 20rpx;
			border: #01aaed 1px solid;
			margin-left: 10rpx;
			margin-bottom: 10rpx;
			border-radius: 10rpx;
		}
	}

	.none_user {
		color: #363636;
		font-size: $uni-font-size-sm;
		width: 100%;
		text-align: center;
	}

	.current-class {
		display: flex;
		// justify-content: space-between;

		.filter-search {
			border: 1px solid #007aff;
			height: 65rpx;
			width: calc(100% - 170rpx);
			padding: 0 20rpx;
		}

		.search_bottn {
			width: 170rpx;
			text-align: center;
			color: #0081ff;
			margin-left: 200rpx;
			line-height: 64rpx;
		}
	}
}
.buttons {
	height: 70rpx;
	width: 100&;
	display: flex;
	margin-bottom: 25rpx;
	margin-top: 20rpx;
}

.content {
	width: 100%;

	.text-description {
		width: 30%;
	}

	.desc {
		width: 70%;

		.tool {
			.apply_button {
				position: absolute;
				padding: 10rpx 15rpx;
				height: auto;
				right: 30rpx;
				margin-top: -5px;
			}
		}
	}
}
</style>
